/* 定义全局变量 */
:root {
	--bg-color: #f5f7fa;
	--text-color: #333;
	--el-bg-color: #FFFFFF;
	--el-hover-color: #DDDDDD;
	--alert-color: #F0F0F0CC;
	--shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 全局样式 */
body {
	background: var(--bg-color);
	color: var(--text-color);
	line-height: 1.6;
	overflow-x: hidden;
	margin: 8px 0; /* 覆盖用户默认代理样式 */
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* 主题过渡 */
button, textarea, .container {
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* 通用按钮样式 */
button {
	padding: 8px 16px;
	background: var(--el-bg-color);
	color: var(--text-color);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.3s;
	box-shadow: var(--shadow);
}

button:hover {
	background: var(--el-hover-color);
}

/* 按钮区样式 */
#topDiv {
    position: fixed;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 10px; /* 设置按钮之间的间距 */
    z-index: 10;
}

/* 开关按钮样式 */
.theme-switch {
	--width: 64px;
	--height: 32px;
	--padding: 4px;
	--transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	position: relative;
	display: inline-block;
	width: var(--width);
	height: var(--height);
	
	/* 隐藏原生复选框 */
	input {
		opacity: 0;
		width: 0;
		height: 0;
	}
	
	/* 滑动轨道 */
	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #2c3e50;
		transition: var(--transition);
		border-radius: 34px;
		box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
		
		/* 滑动按钮 */
		&:before {
			content: "";
			position: absolute;
			height: calc(var(--height) - var(--padding)*2);
			width: calc(var(--height) - var(--padding)*2);
			left: var(--padding);
			bottom: var(--padding);
			background: linear-gradient(145deg, #f1c40f, #f39c12);
			border-radius: 50%;
			transition: var(--transition);
			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
		}
		
		/* 日月图标（纯CSS绘制） */
		&:after {
			content: "🌙";
			position: absolute;
			right: 8px;
			top: 50%;
			transform: translateY(-50%);
			color: rgba(255,255,255,0.8);
			font-size: 14px;
			transition: opacity 0.3s;
		}
	}
	
	/* 暗黑模式激活状态 */
	input:checked + .slider {
		background: #3498db;
		
		&:before {
			transform: translateX(calc(var(--width) - var(--height)));
			background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
		}
		
		&:after {
			content: "☀️";
			left: 8px;
			right: auto;
			color: rgba(0,0,0,0.8);
		}
	}
}

/* 输入区样式 */
textarea {
	margin: 50px 20%;
	width: 60%;
	height: 45vh; 
	padding: 20px;
	border: none;
	outline: none;
	appearance: none;
	font-size: 30px;
	font-family: "Curlz MT", "Comic Sans MS", cursive;
	line-height: 1.6;
	background: var(--el-bg-color);
	color: var(--text-color);
	word-break: break-all;
	box-shadow: var(--shadow);
	resize: vertical; /* 保持默认竖向拖拽功能（both/vertical/horizontal 支持双向拉伸） */
	will-change: contents, font-size;
    contain: content;

	/* 隐藏 WebKit 内核的调整手柄图标 */
	&::-webkit-resizer {
		background: var(--el-bg-color);
		opacity: 0;
	}
  
	transition: 0.3s;
	
	&:active {
		box-shadow: 0 0 8px rgba(0,123,255,0.3)!important;
	}
	
	/* 隐藏滚动条 */
	/*
	scrollbar-width: none; 
	&::-webkit-scrollbar {
		display: none;
	}
	*/
	
	/* 滚动条样式 */
	&::-webkit-scrollbar {
		width: 8px; /* 垂直滚动条宽度 */
		height: 8px; /* 水平滚动条高度 */
		background-color: transparent; /* 轨道背景透明 */
	}
	
	/* 滚动条滑块 */
	&::-webkit-scrollbar-thumb {
		background: #A8A8A87F;
		backdrop-filter: blur(4px);
		border-radius: 4px; 
		border: 1px solid rgba(255,255,255,0.1);
		transition: background 0.3s;
	}
	
	/* 滑块悬停效果 */
	&::-webkit-scrollbar-thumb:hover {
		background-color: #909090;
	}
	
	/* 滚动条轨道 */
	&::-webkit-scrollbar-track {
		background-color: var(--el-bg-color); /* 轨道背景色 */
		border-radius: 4px; /* 与滑块保持风格统一 */
	}
}

/* 主题切换开关、字数统计 */
.container, 
.container_left {
	position: fixed; /* 使div保持在页面的固定位置 */
	bottom: 1.5rem;
	background: var(--el-bg-color);
	border-radius: 20px;
	box-shadow: var(--shadow);
	font-size: 0.9rem;
}

.container_left {
	left: 1.5rem;
	padding: 0.3rem 0.3rem;
}

/* 字数统计 */
.container {
	right: 1.5rem;
	padding: 0.6rem 1.2rem;
}

/* 拖拽区域提示 */
.drag-hint {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	background: var(--alert-color);
	border-radius: 8px;
}

/* 替换弹窗 */
#replacePopup {
	position: fixed;
	top: 10px;
	right: 10px; /* 将弹窗移到右上角 */
	background: var(--bg-color);
	border-radius: 8px;
	padding: 10px;
	box-shadow: var(--shadow);
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 213px; /* 设置最大宽度，避免过宽 */
	
	input {
		margin: 5px;
		padding: 8px 16px;
		border: 1px solid #DDDDDD;
		border-radius: 4px;
		background: var(--el-bg-color);
		color: var(--text-color);
		flex: 1 1 calc(50% - 10px);
	}

	button {
		margin: 5px;
		flex: 1 1 auto;
	}
}

#closePopup {
	position: absolute;
	top: -9px;
	right: 2px;
	cursor: pointer;
	font-size: 20px;
}

/* 帮助span样式 */
#helpIcon {
	position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 20px; /* 宽度，可根据需要调整 */
    height: 20px; /* 高度，可根据需要调整 */
    text-align: center; /* 文字居中 */
    line-height: 20px; /* 行高，与高度一致实现垂直居中 */
}

/* 黑暗模式样式 */
body.dark-mode {
	--bg-color: #1a1a1a;
	--text-color: #ffffff;
	--el-bg-color: #3d3d3d;
	--el-hover-color: #555;
	--border-color: #555;
	--alert-color: #161111cc;
	--shadow: 0 2px 8px rgba(255, 255, 255, 0);
	
	#replacePopup {
		background: #333;
		border-color: var(--border-color);
		
		input {
			border-color: var(--border-color);
		}
		
		button {
			border-color: var(--border-color);
		}
	}
}